<template>
  <el-drawer :visible.sync="dialogVisible" direction="rtl" size="30vw">
    <div class="info-inner">
      <!-- 认证审核 -->
      <template v-if="type === 0">
        <el-divider>认证审核</el-divider>
        <div class="detail-item">
          <label class="detail-item__label">供应商公司名:</label>
          <div class="detail-item__content">{{ detail.companyName }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">供应商公司地址:</label>
          <div class="detail-item__content">{{ detail.companyAddress }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">供应商联系人:</label>
          <div class="detail-item__content">{{ detail.companyContact }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">供应商联系电话:</label>
          <div class="detail-item__content">
            {{ detail.companyContactMobile }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">备注:</label>
          <div class="detail-item__content">{{ detail.remark }}</div>
        </div>
      </template>
      <!-- 供应信息 -->
      <template v-else-if="[1, 6].includes(type)">
        <el-divider>供应信息</el-divider>
        <div class="detail-item">
          <label class="detail-item__label">供应标题:</label>
          <div class="detail-item__content">{{ detail.supplyTitle }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">供应描述:</label>
          <div class="detail-item__content">{{ detail.supplyDesc }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">供应类型:</label>
          <div class="detail-item__content">
            {{ supplyTypeEnum[detail.supplyType] }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">城市名:</label>
          <div class="detail-item__content">
            <dict-tag
              :options="dict.type.city_names"
              :value="detail.cityName"
            />
          </div>
        </div>
        <template v-if="detail.supplyType !== 5">
          <div class="detail-item">
            <label class="detail-item__label">联系人:</label>
            <div class="detail-item__content">{{ detail.supplyUserInfo.nickName }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">联系方式:</label>
            <div class="detail-item__content">{{ detail.supplyUserInfo.phonenumber }}</div>
          </div>
        </template>
        <template v-if="detail.supplyType === 1">
          <div class="detail-item">
            <label class="detail-item__label">供电方式:</label>
            <div class="detail-item__content">
              <dict-tag
                :options="dict.type.power_way"
                :value="detail.framePowerWay"
              />
            </div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">机柜功率(KW):</label>
            <div class="detail-item__content">{{ detail.framePower }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">机柜高度:</label>
            <div class="detail-item__content">{{ detail.frameHeight }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">单价:</label>
            <div class="detail-item__content">{{ detail.framePrice }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">可租数量:</label>
            <div class="detail-item__content">{{ detail.supplyNum }}</div>
          </div>
        </template>
        <template v-if="detail.supplyType === 2">
          <div class="detail-item">
            <label class="detail-item__label">运营商:</label>
            <div class="detail-item__content">
              <dict-tag
                :options="dict.type.operator"
                :value="detail.bwOperator"
              />
            </div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">路由类型:</label>
            <div class="detail-item__content">
              <dict-tag
                :options="dict.type.route_type"
                :value="detail.bwRouteType"
              />
            </div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">带宽价格:</label>
            <div class="detail-item__content">
              {{ detail.bwBandwidthPrice }}
            </div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">带宽可租数量(G):</label>
            <div class="detail-item__content">{{ detail.bwBandwidthNum }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">带宽价格:</label>
            <div class="detail-item__content">{{ detail.bwIpPrice }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">IP可租数量(G):</label>
            <div class="detail-item__content">{{ detail.bwIpNum }}</div>
          </div>
        </template>
        <template v-if="detail.supplyType === 4">
          <div class="detail-item">
            <label class="detail-item__label">计费模式:</label>
            <div class="detail-item__content">
              {{ gpuAbilityTypeEnum[detail.gpuAbilityType] }}
            </div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">租出算力能力(PFLOPS):</label>
            <div class="detail-item__content">{{ detail.gpuApplyPflops }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">计算资源:</label>
            <div class="detail-item__content">{{ detail.gpuResource }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">网络架构:</label>
            <div class="detail-item__content">{{ detail.gpuNet }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">可租数量:</label>
            <div class="detail-item__content">{{ detail.gpuNum }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">单价:</label>
            <div class="detail-item__content">{{ detail.gpuPrice }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">卡类型:</label>
            <div class="detail-item__content">
              <dict-tag
                :options="dict.type.supply_gpu_type"
                :value="detail.gpuType"
              />
            </div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">适用场景:</label>
            <div class="detail-item__content">{{ detail.gpuOccasion }}</div>
          </div>
        </template>
        <template v-if="detail.supplyType === 5">
          <div class="detail-item">
            <label class="detail-item__label">品牌:</label>
            <div class="detail-item__content">
              {{ detail.brandName }}
            </div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">型号:</label>
            <div class="detail-item__content">{{ detail.modelName }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">货源性质:</label>
            <div class="detail-item__content">{{ detail.goodsType === 1 ? '现货' : '期货' }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">销售数量:</label>
            <div class="detail-item__content">{{ detail.goodsNumber }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">单价:</label>
            <div class="detail-item__content">{{ detail.goodsPrice }} / {{ detail.priceUnit }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">交付地点:</label>
            <div class="detail-item__content">{{ detail.goodsAddress }}</div>
          </div>
          <div class="detail-item" v-if="detail.goodsType === 2">
            <label class="detail-item__label">批次量:</label>
            <div class="detail-item__content">{{ detail.batchNum }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">联系人:</label>
            <div class="detail-item__content">{{ detail.contactUser }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">联系电话:</label>
            <div class="detail-item__content">{{ detail.contactUserMobile }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">所属公司:</label>
            <div class="detail-item__content">{{ detail.companyName }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">信息过期时间:</label>
            <div class="detail-item__content">{{ detail.expireTime }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label" v-if="detail.goodsType === 2">到货时间:</label>
            <div class="detail-item__content">{{ detail.arriveTime }}</div>
          </div>
        </template>
        <div class="detail-item">
          <label class="detail-item__label">可租时间:</label>
          <div class="detail-item__content">
            {{ parseTime(detail.supplyBegin, "{y}-{m}-{d}") }} ~
            {{ parseTime(detail.supplyEnd, "{y}-{m}-{d}") }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">上架截止时间:</label>
          <div class="detail-item__content">
            {{ parseTime(detail.deadTime, "{y}-{m}-{d}") }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">备注:</label>
          <div class="detail-item__content">{{ detail.remark }}</div>
        </div>
        <template v-if="type === 6">
          <el-divider>申请信息</el-divider>
          <div class="detail-item">
            <label class="detail-item__label">申请时间:</label>
            <div class="detail-item__content">{{ detail.supplyTime }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">申请说明:</label>
            <div class="detail-item__content">{{ detail.applyDesc }}</div>
          </div>
          <div class="detail-item">
            <label class="detail-item__label">申请可用截止时间:</label>
            <div class="detail-item__content">{{ detail.orderLastTime }}</div>
          </div>
        </template>
      </template>
      <!-- 元素信息 -->
      <template v-else-if="type === 4">
        <el-divider>元素信息</el-divider>
        <div class="detail-item">
          <label class="detail-item__label">元素名称:</label>
          <div class="detail-item__content">{{ detail.elementTitle }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">元素来源:</label>
          <div class="detail-item__content">
            {{ elementFromEnum[detail.elementFrom] }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">元素类型:</label>
          <div class="detail-item__content">
            {{ elementTypeEnum[detail.elementType] }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">共享类型:</label>
          <div class="detail-item__content">
            {{ elementShareEnum[detail.elementShareType] }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">是否可下载:</label>
          <div class="detail-item__content">
            {{ elementDownloadEnum[detail.downloadType] }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">元素框架:</label>
          <div class="detail-item__content">
            <dict-tag
              :value="row.elementFrame"
              :options="detail.element_frame"
            />
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">平台推荐:</label>
          <div class="detail-item__content">
            {{ elementRecommendEnum[detail.recommendStatus] }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">研究方向、研究领域:</label>
          <div class="detail-item__content">
            <dict-tag
              v-for="tag in detail.elementDomainList"
              :key="tag"
              :value="tag"
              :options="dict.type.element_domain"
            />
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">元素标签:</label>
          <div class="detail-item__content">
            <dict-tag
              v-for="tag in detail.elementTagList"
              :key="tag"
              :value="tag"
              :options="dict.type.element_tag"
            />
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">创建人:</label>
          <div class="detail-item__content">{{ detail.createBy }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">创建时间:</label>
          <div class="detail-item__content">
            {{ parseTime(detail.createTime, "{y}-{m}-{d}") }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">描述:</label>
          <div class="detail-item__content">{{ detail.remark }}</div>
        </div>
      </template>
      <!-- 新闻资讯 -->
      <template v-else-if="type === 2">
        <el-divider>新闻资讯</el-divider>
        <div class="detail-item">
          <label class="detail-item__label">信息大类:</label>
          <div class="detail-item__content">
            <dict-tag :options="dict.type.info_type" :value="detail.infoType" />
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">信息标题:</label>
          <div class="detail-item__content">{{ detail.infoTitle }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">信息来源:</label>
          <div class="detail-item__content">
            {{ detail.infoFrom === 1 ? "平台" : "中国算力网" }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">是否通知订阅人:</label>
          <div class="detail-item__content">
            {{ detail.noticeUserStatus ? "是" : "否" }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">信息简单描述:</label>
          <div class="detail-item__content">{{ detail.infoSimpleDesc }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">信息大图:</label>
          <div class="detail-item__content">
            <image-preview :src="detail.infoPicUrl" :width="50" :height="50" />
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">跳转链接:</label>
          <div class="detail-item__content">{{ detail.openUrl || "无" }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">信息详细描述:</label>
          <div
            class="detail-item__content ql-container"
            v-html="detail.infoDetailDesc"
          ></div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">备注:</label>
          <div class="detail-item__content">{{ detail.remark }}</div>
        </div>
      </template>
      <!-- 资源节点 -->
      <template v-else-if="type === 5">
        <el-divider>资源节点</el-divider>
        <div class="detail-item">
          <label class="detail-item__label">节点名称:</label>
          <div class="detail-item__content">{{ detail.nodeName }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">节点类型:</label>
          <div class="detail-item__content">
            {{ detail.nodeType === 1 ? "章鱼" : "其他" }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">节点Url:</label>
          <div class="detail-item__content">{{ detail.nodeUrl }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">节点联系人:</label>
          <div class="detail-item__content">{{ detail.nodeLinkUser }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">节点联系方式:</label>
          <div class="detail-item__content">{{ detail.nodeLinkMobile }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">节点登录账号:</label>
          <div class="detail-item__content">{{ detail.nodeLoginUser }}</div>
        </div>
      </template>
      <template v-else-if="type === 7">
        <el-divider>元素文件</el-divider>
        <div class="detail-item">
          <label class="detail-item__label">文件名称:</label>
          <div class="detail-item__content">{{ detail.originalFileName }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">文件类型:</label>
          <div class="detail-item__content">
            {{ detail.fileType === 1 ? "网络外链" : "系统文件" }}
          </div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">文件大小:</label>
          <div class="detail-item__content">{{ detail.fileSize }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">文件路径:</label>
          <div class="detail-item__content">{{ detail.url }}</div>
        </div>
        <div class="detail-item">
          <label class="detail-item__label">用途描述:</label>
          <div class="detail-item__content">{{ detail.fileDesc }}</div>
        </div>
      </template>
    </div>
  </el-drawer>
</template>

<script>
import typeMap, {
  supplyTypeEnum,
  gpuAbilityTypeEnum,
  elementFromEnum,
  elementTypeEnum,
  elementShareEnum,
  elementDownloadEnum,
  elementRecommendEnum,
} from "./const";
export default {
  name: "ReviewDrawer",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: Number,
    id: {
      require: true,
    },
  },
  dicts: [
    "operator",
    "power_way",
    "route_type",
    "gpu_resource_type",
    "city_names",
    "supply_gpu_type",
    "element_domain",
    "element_frame",
    "element_tag",
    "info_type",
  ],
  data() {
    return {
      detail: {},
      supplyTypeEnum,
      gpuAbilityTypeEnum,
      elementFromEnum,
      elementTypeEnum,
      elementShareEnum,
      elementDownloadEnum,
      elementRecommendEnum,
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    currInfo() {
      return typeMap[this.type] || {};
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getDetail();
      }
    },
  },
  methods: {
    async getDetail() {
      const { data } = await this.currInfo.api(this.id);
      this.detail = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.info-inner {
  padding: 0 32px;
}
.detail-item {
  display: flex;
  line-height: 32px;
  margin-bottom: 16px;
  &__label {
    font-weight: 400;
    color: #8a8c8f;
    // width: 100px;
    // text-align: right;
    margin-right: 10px;
  }
  &__content {
    flex: 1;
    overflow: hidden;
    word-break: break-all;
  }
}
::v-deep .el-drawer__header {
  margin-bottom: 0;
}
</style>
